<template>
	<view >
		
		<view class="u-flex user-box u-p-l u-p-r-20 u-p-b">
			<view class="u-m-r-10">
				<u-avatar :src=user.userImg @click ='xuanzetx' size="150"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20"> {{user.userName}}</view>
				<view class="u-font-14 u-tips-color">{{user.age}}岁</view>
			</view>
		
		</view>
	
		
		<view class="u-m-t-20">
			<u-cell-group>
				
				<u-cell-item icon="../../static/我的.png" title="我的"@click ='wode' v-if="logined"></u-cell-item>
				<u-cell-item icon="star" title="收藏"@click ='shoucang' v-if="logined"></u-cell-item>
				<u-cell-item icon="../../static/关注.png" title="关注"@click ='guanzhu' v-if="logined"></u-cell-item>
				<u-cell-item icon="edit-pen" title="修改信息"@click ='change' v-if="logined"></u-cell-item>
				
				<u-cell-item icon="../../static/注销.png" title="注销账户"@click ='logoff' v-if="logined"></u-cell-item>
				<u-cell-item  icon="../../static/退出.png" title="退出登录"@click ='quit' v-if="logined"></u-cell-item>
				<u-cell-item icon="../../static/我的.png" title="登录" @click="gologin" v-else="logined"></u-cell-item>
			
			</u-cell-group>
		
		
		</view>

	</view>
	
	
</template>

<script>
	export default {
		data() {
			return {
				pic:'../../static/taffy.png',
				show:true,
			    logined:false,
				temp:{				//临时记录账号密码
					account:"",
					password:""
				},
				user:[{
					  userId:"",
					  userName:"游客",
					  account:"",
					  password:"",
					  phone:"",
					  age:"0",
					  city:"",
					  sex:"",
					  sign:"",
					  userImg:""
					
					}]
			}
		},
		//当页面展示的时候会调用
		onShow(){
			getApp().globalData.globalUserid;
			getApp().globalData.globalUseraccount;
			getApp().globalData.globalUserpassword
			if(getApp().globalData.globalUserid==0) //没有登录
			{
				this.logined=false;
				this.user.userName="游客";
				this.user.age=0;
				this.user.userImg="";
			}
			else{							//已经登陆
				this.logined=true;
				this.temp.account=getApp().globalData.globalUseraccount;
				this.temp.password=getApp().globalData.globalUserpassword;
				//获取登录信息
				uni.request({
					//地址
				
					url:"http://localhost:9090/doLogin",
					//请求方式
					method:"POST",
					//请求发送数据
					data:this.temp,
					//返回数据
					success:(res)=>{
						console.log(res);
						//成功code是200，保存用户信息，跳转到个人信息
						//失败是201,提示用户名或者密码错误
						if(res.data.code*1==200){
		
							
							//更新用户信息
							this.user=res.data.result;
							
						}else{
							//失败
							this.$u.toast("登录失败，用户名或者密码错误");
						}
						
					}
				});
			}


		},
		

		methods: {
			
			gologin(){
				uni.navigateTo({
					url:'/pages/XJX_pages/login'
				})
			},
			xuanzetx(){
				//没有登陆的话不能选择头像
				if(getApp().globalData.globalUserid==0){
					this.$u.toast("请先登录！");
				}
				else{
					uni.navigateTo({
						url:'/pages/XJX_pages/xuanzetx'
					})
				}
				
			},
			
			//注销
			logoff(){
			let that=this
				uni.showModal({
						title: '提示：',
						content: '请确认是否要注销账户?',
						success: function(res) {
							if (res.confirm) {
								 console.log('确定注销');
									this.logined=false;
								uni.request({
									//地址
									url:"http://localhost:9090/doDelete?Account="+getApp().globalData.globalUseraccount,
									//请求方式this.user
									method:"GET",
									//请求发送数据
								
									//返回数据
									success:(res)=>{
										if(res.data.code*1==200){
											uni.setStorageSync("user","");//清空存储
											//修改登陆状态
											this.logined=false;
											getApp().globalData.globalUserid=0;
											getApp().globalData.globalUseraccount=null;
											getApp().globalData.globalUserpassword=null;
											getApp().globalData.globalUsercity=null;
											uni.navigateTo({
													url:'/pages/XJX_pages/login'
												})
											
										}
									
										else{
											this.$u.toast("注销失败！");
										}
										
										}
										
									
								});
							} else if (res.cancel) {
								// console.log('取消');
								//TODO
							}
						}
				});
			
			},
			change(){
				
					uni.navigateTo({
						url:'/pages/QQY_pages/modify'
					})
				
				
			},
			wode(){
				
				
					uni.navigateTo({
						url:'/pages/XJX_pages/wode'
					})
				
				
			},
			shoucang(){
				
				
					uni.navigateTo({
						url:'/pages/XJX_pages/shoucang'
					})
				
				
			},
			guanzhu(){
				
					uni.navigateTo({
						url:'/pages/XJX_pages/guanzhu'
					})
				
				
			},
			//退出
			quit(){
				uni.setStorageSync("user","");//清空存储
				//修改登陆状态
				this.logined=false;
				//修改全局变量
				getApp().globalData.globalUserid=0;
				getApp().globalData.globalUsercity=null;
				getApp().globalData.globalUseraccount=null;
				//修改账户信息
				this.user.userName="游客";
				this.user.age=0;
				this.user.userImg="";
			},
		
		}
	}
</script>

<style lang="scss">
	.center {
	        flex: auto;
	        display: flex;
	        flex-direction: column;
	        justify-content: center;
	        align-items: center;
	        background-color: white;
			height: 300px;
	    }

page{
	background-color: #ededed;
}

.camera{
	width: 54px;
	height: 44px;
	
	&:active{
		background-color: #ededed;
	}
}
.user-box{
	background-color: #fff;
}
.mybutton1{

	background-color:#77eef6;
       width: 250px;
		height: 40px;
	
	

}
.mybutton{

	
	flex: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: white;
	height: 243px;
}
.zr {
		color: white;
		background: #77eef6;
		width: 100%;
		height: 60upx;
		position: relative;
	}

	.water {
		position: absolute;
		left: 0;
		bottom: -10upx;
		height: 30upx;
		width: 100%;
		z-index: 1;
	}

	.water-c {
		position: relative;
	}

	.water-1 {
		background: url("") repeat-x;
		background-size: 600upx;
		animation: wave-animation-1 4.5s infinite linear;
	}

	.water-2 {
		top: 5upx;
		background: url("") repeat-x;
		background-size: 600upx;
		animation: wave-animation-2 8s infinite linear;
	}

	.water-1,
	.water-2 {
		position: absolute;
		width: 100%;
		height: 60upx;
	}

	.back-white {
		background: #fff;
	}

	@keyframes wave-animation-1 {
		0% {
			background-position: 0 top;
		}

		100% {
			background-position: 600upx top;
		}
	}

	@keyframes wave-animation-2 {
		0% {
			background-position: 0 top;
		}

		100% {
			background-position: 600px top;
		}
	}

	
</style>
